<template>
  <a-modal
    v-model:visible="visible"
    title="编辑实名认证"
    @ok="handleOk"
    ok-text="确定"
    cancel-text="取消"
  >
    <a-form
      ref="formRef"
      :model="modelRef"
      :rules="rulesRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="姓名" name="name">
        <a-input v-model:value="modelRef.name" />
      </a-form-item>
      <a-form-item label="实名类型" name="type">
        <a-select v-model:value="modelRef.type">
          <a-select-option
            v-for="(item,key) in typeList"
            :key="key"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="手机号" name="mobile">
        <a-input type="number" v-model:value="modelRef.mobile" />
      </a-form-item>
      <a-form-item label="身份证号" name="id_number">
        <a-input v-model:value="modelRef.id_number" />
      </a-form-item>
      <a-form-item label="工作职务" name="duties_name">
        <a-input v-model:value="modelRef.duties_name" />
      </a-form-item>
      <a-form-item label="所属地区" name="region">
        <a-cascader
          v-model:value="modelRef.region"
          :field-names="{ label: 'name', value: 'id', children: 'children' }"
          :options="regionList"
          placeholder="请选择地区"
        />
      </a-form-item>
      <a-form-item label="详细地址" name="detail">
        <a-input v-model:value="modelRef.detail" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input type="number" v-model:value="modelRef.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { toRefs, reactive, defineComponent } from "vue";
import { notice } from "@/config";
import { edit } from "@/api/user/Realname";
export default defineComponent({
  components: {},
  setup(props, { emit }) {
    let state = reactive({
      visible: false,
      formRef: '',
      item: {},
      regionList:[],
      typeList:[],
    });
    let modelRef = reactive({
      id:'',
      name: "",
      type: undefined,
      mobile: "",
      id_number: "",
      duties_name: "",
      detail:'',
      region: [],
      sort: 100,
    });
    let rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入登录名",
        },
      ],
      type: [
        {
          required: true,
          message: "请选择身份类型",
        },
      ],
      mobile: [
        {
          required: true,
          message: "请输入手机号",
        },
      ],
      id_number: [
        {
          required: true,
          message: "请输入身份证号",
        },
      ],
      duties_name: [
        {
          required: true,
          message: "请输入职务",
        },
      ],
      region: [
        {
          required: true,
          message: "请选择地址",
        },
      ],
      sort: [
        {
          required: true,
          message: "请输入排序",
        },
      ],
    });

    // 显示对话框
    const show = (regionList,typeList,item) => {
      state.regionList = regionList
      state.typeList = typeList
      state.item = item
      state.visible = state.visible ? false : true

      modelRef.id = item.id
      modelRef.name = item.name
      modelRef.type = item.type
      modelRef.mobile = item.mobile
      modelRef.id_number = item.id_number
      modelRef.duties_name = item.duties_name
      modelRef.detail = item.detail
      modelRef.sort = item.sort
      let region = []
      region.push(item.province_id,item.city_id)
      item.region_id?region.push(item.region_id):''
      modelRef.region = region

    };

    

    const handleOk = () => {
      state.formRef.validate().then(() => {
        edit(modelRef).then((res) => {
          emit("okCallback", res);
          notice(res.status == 200 ? "success" : "error", res.message);
          state.visible = false;
        });
      });
    };

    return {
      show,
      handleOk,
      ...toRefs(state),
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      modelRef,
      rulesRef,
    };
  },
});
</script>
